<template>
    <div class="vir-acc-body">

        <FullHeadImg back-image="global/global_virtual_bg.png">
            <template #default>
                <h1>
                    Simplify Money Management <br> with Virtual Accounts
                </h1>
            </template>
        </FullHeadImg>

        <section class="vir-head full-bg a-r"
            :style="{ backgroundImage: `url(${getImage('global/global_virtual_bg.png')})` }">

        </section>

        <section class="vir-acc-desc body-m">

            <p>
                Our Virtual Accounts provide an efficient way to manage money flows seamlessly. Honeybee offers:
            </p>
            <div class="vir-acc-offers ">
                <img :src="getImage('/global/gbp.png')" alt="">
                <img :src="getImage('/global/usd.png')" alt="">
                <img :src="getImage('/global/eur.png')" alt="">
            </div>
            <p>
                We understand the importance of having an account under your own name, and we continuously expand our
                list
                of supported currencies to meet your needs.
            </p>
            <p>
                Virtual Accounts are issued in your company’s name for both first- and
                third-party collections and payouts.
            </p>
        </section>

        <section class="full-bg">
            <div class="offers-imgs body-m">
                <img class="offer-relimg" :src="getImage('/global/relimg.png')" alt="">
                <div class="offers-compare">
                    <div class="gradient-card">
                        First party or third-party pay-into your dedicated virtual account in your own name
                    </div>
                    <div class="offers-arrow">
                        <img :src="getImage('global/arrow.png')" alt="">
                    </div>
                    <p class="gradient-card">
                        First party or third-party pay-outto your business partner or expenses from your own named
                        account
                    </p>
                </div>
                <img class="offer-dash" :src="getImage('/global/dash.png')" alt="">
            </div>
        </section>

        <section class="vir-acc-benefit body-m">
            <h2>Benefits of Virtual Accounts </h2>
            <div class="vir-acc-benefit-cards">
                <div class="gradient-card" v-for="(item, index) in benefits" :key="index">
                    <div class="card-title">
                        <img :src="getImage(item.img)" alt="">
                        <h3>{{ item.title }}</h3>
                    </div>
                    <div>{{ item.desc }}</div>
                </div>
            </div>
            <ReadyGetStart />
        </section>
        <section></section>
    </div>
</template>

<script setup lang="ts" name="name">
import ReadyGetStart from '@/components/ReadyGetStart.vue';

const benefits = [
    { img: '/global/b1.png', title: 'Enhanced Efficiency', desc: 'Streamline financial operations and simplify reporting' },
    { img: '/global/b2.png', title: 'Improved Control', desc: 'Track funds for specific projects and budgets' },
    { img: '/global/b3.png', title: 'Reduced Risk', desc: 'Isolate funds for individual projects and reduce risk' },
    { img: '/global/b4.png', title: 'Improved Cash Flow', desc: 'Optimize cash flow management and maximize liquidity' },
]

</script>

<style scoped lang="scss">
.vir-acc-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 4rem;
}

.vir-acc-desc {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .vir-acc-offers {
        display: flex;
        gap: 4rem;
        align-items: center;
        justify-content: center;

        img {
            width: 20%;
        }
    }
}

.offers-imgs {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
    gap: 2rem;

    .offer-relimg {
        width: 70%;
        object-fit: cover;
    }

    .offer-dash {
        width: 100%;
        object-fit: cover;
    }

    .offers-compare {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 2rem;

        .gradient-card {
            background: #F3D523;
            flex: 1;
        }

        .offers-arrow {
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 30px;
            }
        }
    }
}

.vir-acc-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    .vir-acc-benefit-cards {
        width: 100%;
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(2, 1fr);

        .gradient-card {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .card-title {
                display: flex;
                align-items: center;
                gap: 1rem;

                img {
                    width: 30px;
                }
            }
        }
    }
}

@media (max-width: 650px) {

    .vir-acc-body {
        gap: 2rem;
    }

    .vir-acc-desc .vir-acc-offers {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
        justify-content: center;

        img {
            width: 50%;
        }
    }

    .offers-imgs .offer-relimg {
        width: 90%;
    }

    .offers-imgs .offers-compare {
        flex-direction: column;
        gap: 1rem;

        .offers-arrow img {
            transform: rotateZ(90deg);
        }
    }

    .vir-acc-benefit .vir-acc-benefit-cards {
        grid-template-columns: 1fr;
        width: 100%;
    }
}
</style>